<template>
  <list class="wrapper">
    <cell class="group">
      <text class="group-title">Environment</text>
      <div class="row">
        <text class="label">Weex SDK</text>
        <text class="value">{{env.weexVersion}}</text>
      </div>
      <div class="row">
        <text class="label">JS Framework</text>
        <text class="value">{{env.jsfm}}</text>
      </div>
      <div class="row">
        <text class="label">Platform</text>
        <text class="value">{{env.platform}}</text>
      </div>
      <div class="row">
        <text class="label">osVersion</text>
        <text class="value">{{env.osVersion}}</text>
      </div>
      <div class="row">
        <text class="label">appName</text>
        <text class="value">{{env.appName}}</text>
      </div>
      <div class="row">
        <text class="label">appVersion</text>
        <text class="value">{{env.appVersion}}</text>
      </div>
      <div class="row">
        <text class="label">deviceModel</text>
        <text class="value">{{env.deviceModel}}</text>
      </div>
    </cell>
    <cell class="group">
      <text class="group-title">Components</text>
      <div class="line" v-for="(name, i) in components" :key="i">
        <text class="component key"><{{name}}></text>
        <text :class="['value', isSupport(`@component/${name}`)]">{{isSupport(`@component/${name}`)}}</text>
      </div>
    </cell>
    <cell class="group">
      <text class="group-title">Modules</text>
      <div class="module-apis" v-for="(mod, j) in modules" :key="j">
        <div class="line">
          <text class="module key">{{mod.name}}</text>
          <text :class="['value', isSupport(`@module/${mod.name}`)]">{{isSupport(`@module/${mod.name}`)}}</text>
        </div>
        <div class="line" v-if="isSupport(`@module/${mod.name}`) === 'Yes'" v-for="(method, x) in mod.methods" :key="x">
          <text class="method key">{{method}}</text>
          <text :class="['value', isSupport(`@module/${mod.name}.${method}`)]">{{isSupport(`@module/${mod.name}.${method}`)}}</text>
        </div>
      </div>
    </cell>
  </list>
</template>

<script>
  export default {
    data () {
      return {
        env: Object.assign({
          jsfm: typeof getJSFMVersion === 'function' ? getJSFMVersion() : 'unknown'
        }, WXEnvironment),
        components: [
          'div', 'text', 'a', 'image', 'input', 'list', 'cell',
          'scroller', 'loading', 'refresh', 'header', 'slider', 'indicator',
          'switch', 'textarea', 'web', 'video', 'tabbar', 'embed',
          'richtext', 'waterfall'
        ],
        modules: [{
          name: 'dom',
          methods: ['scrollToElement', 'getComponentRect', 'addRule']
        }, {
          name: 'modal',
          methods: ['toast', 'alert', 'confirm', 'prompt']
        }, {
          name: 'stream',
          methods: ['fetch']
        }, {
          name: 'animation',
          methods: ['transition']
        }, {
          name: 'navigator',
          methods: ['push', 'pop']
        }, {
          name: 'storage',
          methods: ['setItem', 'getItem', 'removeItem', 'length', 'getAllKeys']
        }, {
          name: 'clipboard',
          methods: ['getString', 'setString']
        }, {
          name: 'meta',
          methods: ['setViewport']
        }, {
          name: 'picker',
          methods: ['pick', 'pickDate', 'pickTime']
        }, {
          name: 'webview',
          methods: ['goBack', 'goForward', 'reload']
        }]
      }
    },
    methods: {
      isSupport (condition) {
        try {
          if (weex.supports(condition)) {
            return 'Yes'
          } else {
            return 'No'
          }
        } catch (e) {
          return 'unknown'
        }
        return 'unknown'
      }
    }
  }
</script>

<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .group {
    padding-bottom: 40px;
  }
  .group-title {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    margin-bottom: 20px;
    font-size: 46px;
    color: #666666;
    background-color: #EEEEEE;
  }
  .row {
    margin-top: 22px;
    flex-direction: row;
  }
  .label {
    width: 360px;
    font-size: 40px;
    text-align: right;
    color: #888888;
  }
  .value {
    width: 350px;
    padding-left: 50px;
    font-size: 40px;
  }
  .module-apis {
    margin-bottom: 30px;
  }
  .line {
    flex-direction: row;
    margin-bottom: 16px;
  }
  .module {
    width: 420px;
    margin-left: 80px;
    font-weight: bold;
  }
  .component {
    width: 320px;
    margin-left: 150px;
  }
  .method {
    width: 350px;
    margin-left: 150px;
  }
  .key {
    font-size: 40px;
    color: #888888;
  }
  .value {
   font-size: 40px;
   color: #555555;
  }
  .Yes {
    color: green;
  }
  .No { color: red; }
  .unknown {
    color: #999999;
  }
</style>
